<template>
  <Dialog
    ref="dialog"
    :title="'选择员工'"
    :dialogStyle="{ width: '400px', height: '550px' }"
    :modal="true"
    :draggable="true"
    :resizable="true"
  >
    <div style="height:200px">
      <div id="leftTab">
        <sidebar-dept 
          ref="sidebarDept" 
          :treeId="treeId" 
          :treeHeight="treeHeight" 
          :showUserList="showUserList" 
          :onZTreeCheck="onZTreeCheck"
        />
      </div>
    </div>
    <div slot="footer">
      <ButtonGroup style="width:100%;height:50px">
        <LinkButton
          class="f-full"
          :plain="true"
          btnCls="mybtn"
          @click="handleOk"
          >Ok</LinkButton
        >
        <LinkButton
          class="f-full"
          :plain="true"
          btnCls="mybtn"
          @click="handleCancel"
          >Cancel</LinkButton
        >
      </ButtonGroup>
    </div>
  </Dialog>
</template>

<script>
import sidebarDept from "@/components/dept/sidebarDept";

export default {
  components: {
    sidebarDept
  },
  props: {
    select: Function,
    treeId: String,
    treeHeight:String,
    showUserList:{
      type:Boolean,
      default:true
    },
    onZTreeCheck:{
      type:Function,
      default:null
    }
  },
  methods: {
    //点击确定
    handleOk() {
      const checked = this.$refs.sidebarDept.checked;
      if (checked.length != 0) {
        //回调返回用户编号
        this.select(this.$refs.sidebarDept.checked);
        //关闭对话框
        this.$refs.dialog.close();
      } else {
        this.$messager.alert({
          title: "提示",
          icon: "info",
          msg: "请选择部门!"
        });
      }
    },
    //点击返回
    handleCancel() {
      //关闭对话框
      this.$refs.dialog.close();
    }
  }
};
</script>
